<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>行业管理</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app" v-cloak>
    <div class="main-content">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">行业</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                    <p class="z-jiao">
                      1、设置商户所属的行业<br>
                       <a href="javascript:;">查看更多帮助</a>
                    </p>
                </el-popover>
                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>数据<span>/</span>行业管理</div>
        </div><!-- 页面头部 end -->

        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="行业名称" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
                    </div>
                    <div class="filter-operate">
                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div class="filter-btn fr">
                    <el-button type="primary" @click="showDailog">新增行业</el-button>
                </div>
            </div>

            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="industryList" style="width: 100%;" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="行业名称"  prop="name" min-width="800"></el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="100">
                    		<template slot-scope="scope">
									<el-button type="text" @click="editDailog(scope.$index, scope.row)">编辑</el-button>
									<span class="table-spea-line">|</span>
							        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
                    </el-table-column>
                </el-table>
            </div>

           <!--批量操作-->
		   <div class="grid-content">
			<div class="bg-purple-left">
				<el-checkbox v-model="tableAllCheck" @change="tableAllCheckFn(industryList)"></el-checkbox>
			<el-dropdown @command="handleCommand" placement="top">
				<div class="el-input el-input--suffix">
					<input type="text" value="批量操作" readonly="readonly" class="el-input__inner">
					<span class="el-input__suffix">
						<span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i></span>
					</span>
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="b">批量删除</el-dropdown-item>
				</el-dropdown-menu>
			   </el-dropdown>
			</div>
	 				
            <!--分页-->
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
			<!-- 新增模态框 -->
			  <el-dialog :title="openText" :visible.sync="dialogFormVisible">
				<el-form :model="industry" :rules="rules" ref="industry-form" label-width="100px" class="demo-ruleForm el-input-95">
				     <el-form-item hidden
							label="ID" prop="uuid"> <el-input
							v-model="industry.uuid"></el-input>
					</el-form-item> 
					<el-form-item label="行业名称" prop="name">
						<el-input v-model="industry.name"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" id="addDialog" style="display: none">
				<el-button @click="save" type="primary">确定</el-button>
				<el-button @click="dislogHide">取消</el-button>
				</div>
				<div slot="footer" class="dialog-footer" id="editDialog" style="display: none">
						<el-button @click="update" type="primary">确定</el-button>
						<el-button @click="dislogHide">取消</el-button>
				</div>
			</el-dialog>
        </div>
      </div>
    </div>
</body>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            openText: "",
            industryList: [],
            dialogFormVisible: false,
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            multipleSelection: [],
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": undefined
                }
            },
            industry: {},
            rules: {
            	name: [
                       {required: true, message: "请输入行业名称", trigger: 'blur'},
                       {max: 10, message: '行业名称不能超过10个字符', trigger: 'blur' }
                   ]
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
        },
        created: function () {
            queryList();
        },
        methods: {
        	 // 表格选中项变化事件
		    handleSelectionChange(val) {
		        this.multipleSelection = val;
		    },
   	       dislogHide: function () {
   	  	      	this.dialogFormVisible = false;
   	  	      },
            change: function (ele) {
                console.log(this.valueState);
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                queryList();
            },
            handleClear() {
                this.conditions.name.value = "";
            },
            showDailog: function () {
      	    	this.dialogFormVisible = true;
      	    	this.openText = "新增行业";
      	    	$("#addDialog").css('display','block'); 
      	    	$("#editDialog").css('display','none'); 
             	this.industry.uuid = '';
              	this.industry.name = '';
      	      },
              editDailog: function(index,row){
            	this.dialogFormVisible = true;
            	this.openText = "编辑行业";
      	    	$("#addDialog").css('display','none'); 
      	    	$("#editDialog").css('display','block'); 
              	this.industry = row;
              },
              save: function () {
  	            var self = this;
  	            self.$refs['industry-form'].validate((valid) => {
  	                if (valid) {
  	                    $.ajax({
  	                        url: "/backstage/basicdata/industry/add",
  	                        type: "POST",
  	                        data: JSON.stringify(self.industry),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '新增行业成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/basicdata/industry/tolist';
                                          }
                                      });
  	                            } else {
  	                                self.$message({
  	                                        message: '新增行业失败',
  	                                        type: 'error',
  	                                        duration: 1000,
  	                                        customClass: 'message-center',
  	                                        onClose: function () {
  	                                            window.location.href = '/backstage/basicdata/industry/tolist';
  	                                        }
  	                                    });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
  	        },
  	        update: function () {
  	            var self = this;
  	            self.$refs['industry-form'].validate((valid) => {
  	                if (valid) {
  	                    $.ajax({
  	                        url: "/backstage/basicdata/industry/edit",
  	                        type: "POST",
  	                        data: JSON.stringify(self.industry),
  	                        contentType: "application/json;charset=UTF-8",
  	                        dataType: "json",
  	                        success: function(data) {
  	                            if (data && data.returnCode == "1") {
                                      self.$message({
                                          message: '编辑行业成功',
                                          type: 'success',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/basicdata/industry/tolist';
                                          }
                                      });
  	                            } else {
                                      self.$message({
                                          message: '编辑行业失败',
                                          type: 'error',
                                          duration: 1000,
                                          customClass: 'message-center',
                                          onClose: function () {
                                              window.location.href = '/backstage/basicdata/industry/tolist';
                                          }
                                      });
  	                            }
  	                        }
  	                    });
  	                }
  	            });
  	        },
            handleDelete(index, row) {
                let self = this;
                self.$confirm('确认要删除此行业?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    $.ajax({
                        url: "/backstage/basicdata/industry/delete",
                        type: "POST",
                        data: JSON.stringify([row.uuid]),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode == "1") {
                                self.$message({
                                    message: '删除成功',
                                    type: 'success',
                                    duration: 1000,
                                    customClass: 'message-center'
                                });
                                self.handleQuery();
                            } else {
                                self.$message({
                                    message: '删除失败',
                                    type: 'error',
                                    duration: 1000,
                                    customClass: 'message-center'
                                });
                            }
                        }
                    });
                });
            },
            handleCommand(command) {
               let self = this;
               if (self.multipleSelection.length <= 0) {
            	   self.$message({
                       message: '请先选择要删除的数据',
                       type: 'waring',
                       duration: 1000,
                       customClass: 'message-center'
                   });
                   return;
               }
               var deleteuIds = [];
               for (let i in this.multipleSelection) {
            	   deleteuIds.push(this.multipleSelection[i].uuid);
               }
               
               $.ajax({
                   url: "/backstage/basicdata/industry/delete",
                   type: "POST",
                   data: JSON.stringify(deleteuIds),
                   contentType: "application/json;charset=UTF-8",
                   dataType: "json",
                   success: function (data) {
                       if (data && data.returnCode == "1") {
                    	   self.$message({
                               message: '删除成功',
                               type: 'success',
                               duration: 1000,
                               customClass: 'message-center'
                           });
                    	   self.handleQuery();
                       } else {
                    	   self.$message({
                               message: '删除失败',
                               type: 'error',
                               duration: 1000,
                               customClass: 'message-center'
                           });
                       }
                   }
               });
               
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },

            // 列表筛选项更多操作
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
        }
    });

    function queryList() {
        app.loading = true;
        let queryMessage = {
            "queryPage": app.currentPage,
            "pageShow": app.pageSize,
            "queryParams": app.conditions,
            "sortMap": {
                "createTime": "desc"
            }
        };
        $.ajax({
            url: "/backstage/basicdata/industry/list",
            type: "POST",
            data: JSON.stringify(queryMessage),
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (data) {
                if (data && data.returnCode == "1") {
                    app.industryList = data.returnMessage;
                    app.totalNum = data.pager.totalNum;
                }
                app.loading = false;
            }
        });
    }
</script>
</html>